<html>
<#include "../common/header.ftl">
<style>
    .layui-form-item .layui-input-inline{
        width: 380px;
    }
    .list_item{
        margin-top: 7px;
        margin-bottom: 15px;
    }
    input::-webkit-input-placeholder
    {position:relative;left:15px;}
</style>
<body>
<div id="wrapper" class="toggled">

    <#--边栏sidebar-->
    <#include "../common/nav.ftl">

    <#--主要内容content-->
    <div id="page-content-wrapper">
        <div class="container-fluid" style="margin-left: 54px">
            <div class="row clearfix">
                <div class="col-md-6 column">
                    <form role="form" method="post" action="/sell/seller/contact/save">
                        <#if  contactInfo ?? >
                            <div class="form-group">
                                <label>合同id</label>
                                <input name="contactId" type="text" class="form-control" disabled value="${(contactInfo.contactId)!''}"/>
                            </div>
                        </#if>
                        <div class="form-group">
                            <label>销售员</label>
                            <select name="manId" class="form-control" id="ctestsale">
                                <#list saleManList as saleman>
                                    <option value="${saleman.manId?c}"
                                            <#if (contactInfo)?? && saleman.manId == contactInfo.manId>
                                                selected
                                            </#if>
                                    >${saleman.name}</option>
                                </#list>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>客户</label>
                            <select name="customerId" class="form-control  " id="ctestcustomer">
                                <#list customerList as customer>
                                    <option value="${customer.customerId}"
                                            <#if (contactInfo)?? && customer.customerId== contactInfo.customerId>
                                                selected
                                            </#if>
                                    >${customer.customerName}</option>
                                </#list>
                            </select>
                        </div>
                        <#if  contactInfo ?? >
                            <div class="form-group">
                                <label>总金额</label>
                                <input name="contactMoney" type="text" class="form-control" readonly="readonly" value="${(contactInfo.contactMoney)!''}"/>
                            </div>
                        </#if>
                        <input hidden type="text" name="contactId" value="${(contactInfo.contactId)!''}">

                       <div class="col-md-6 column"></div>
                        <div class="layui-form-item">
                            <div class="form-group">
                            <label>商品列表</label>
                            <select id="sel_product" class="form-control">
                                <#list productList as product>
                                    <option value="${product.productId}"
                                    >${product.productName}</option>
                                </#list>
                             </select>
                             </div>
                            <div class="form-group">
                                <input type="number" min="1" class="layui-input-inline" id="in_count"
                                       style="width: 316px;display: inline-block;}  " placeholder="请输入数量" >
                                <button type="button" id="btn_add" class="btn btn-default btn-primary" style="display: inline-block;">添加</button>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <label class="layui-form-label">合同商品：</label>
                            <div class="layui-inline">
                                <div id="product_list">
                                    <#if contactInfo ??>
                                    <#list contactInfo.productDtos as productDto>
                                        <div class="list_item">
                                            <span style="font-size: 16px;" class="in_productName">${productDto.productName}</span>
                                            <input type="number" name="productQuantity" class="in_count" min="1" value="${productDto.getNumber()}" style="width: 50px;margin-left: 50px;">
                                            <button type="button" class="list_item_delete btn btn-default btn-danger" style="margin-left: 147px;">删除</button>
                                            <input type="text" name="productId" value="${productDto.productId}" style="display:none;">
                                        </div>
                                    </#list>
                                    </#if>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="col-md-12 column" style="margin-left: 290px;">
                                <button class="btn btn-default btn-primary" type="submit">立即提交</button>
                                <button class="btn btn-default" type="reset">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script src="/sell/js/jquery.min.js"></script>
<script>
$(function () {
    $("#btn_add").click(function () {

        var product = $("#sel_product option:selected");
        var count = $("#in_count").val();
        // console.log("00000");
        if (product.val()!=""&&product.val()!=undefined&&count!=""&&count!=0){
            var list_item =  $(".list_item");
            console.log(product);
            for (var i = 0; i < list_item.length; i++){
                console.log(list_item.eq(i).children(".in_productName").text());
                if (list_item.eq(i).children(".in_productName").text()===product.text()){
                    var in_count =  list_item.eq(i).children(".in_count").val();
                    list_item.eq(i).children(".in_count").val(parseInt(count)+parseInt(in_count));
                    return;
                }
            }
            var str = "<div class=\"list_item\">\n" +
                "            <span style=\"font-size: 16px;\" class='in_productName'>"+product.text()+"</span>\n" +
                "            <input type=\"number\" name='productQuantity' class='in_count'  min=\"1\" value=\""+count+"\" style=\"width: 50px;margin-left: 50px;\">\n" +
                "            <button type='button' class=\"list_item_delete btn btn-danger btn-default\" style=\"margin-left: 147px;\">删除</button>\n" +
                "            <input type=\"text\" name=\"productId\" value='" + product.val() + "' style=\"display:none;\">\n" +
                "      </div>";
            $("#product_list").append(str);
        }
    })

    //动态绑定事件 删除商品
    $("#product_list").on('click','.list_item_delete',function () {
        $(this).parent().remove();
    })
})
</script>
</html>